<template>
	<view class="my">
		<view class="headerBox">
			<view class="header">
				<image :src="userInfo.imgUrl" class="headPic"></image>
				<view class="name" v-if="token">
					{{userInfo.nickName}}
					<text>{{switchLevel(level)}}</text>
				</view>
				<!-- <view class="name" v-else  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">请登录</view> -->
				<button v-else class="name" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">请登录</button>
				<image
					:src="gender == 0 ? 'https://cloudcdn.noitom.com.cn/noitom2/billiard/gender0.png' : 'https://cloudcdn.noitom.com.cn/noitom2/billiard/gender1.png'"
					class="gender"></image>
				<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/my_header_btn.png" class="btn"
					@click="toGoods"></image>
			</view>
		</view>

		<view class="container">
			<view class="balance">
				<view class="title">账户余额</view>
				<view class="cont">
					<view class="num"><text>{{surplus}} </text>元</view>
					<view class="btn" @click="payMore">充值</view>
				</view>
			</view>

			<view class="orderForm">
				<view class="title">我的订单</view>
				<view class="orderList">
					<view class="cont" v-for="(item,i) in orderList" :key="i" @click="toOrderList(item.id)">
						<image :src="item.img"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>

			<view class="orther">
				<view class="cont" @click="toSetting">
					<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/setIcon.png"></image>
					<text>设置</text>
					<uni-icons type="right" size="12" color="#A4A4A4"></uni-icons>
				</view>
				<view class="cont" @click="toEmp">
					<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/serviceIcon.png"></image>
					<text>企业服务</text>
					<uni-icons type="right" size="12" color="#A4A4A4"></uni-icons>
				</view>
				<view class="cont" @click="custService">
					<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/customerIcon.png"></image>
					<text>客服</text>
					<uni-icons type="right" size="12" color="#A4A4A4"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		authApplets,
		authPhone,
		getUserDetail
	} from "@/api/getData.js";
	export default {
		data() {
			return {
				decodePhoneParams: {
					code: null,
					encryptedData: null,
					iv: null,
					sessionKey: null,
					openId: null
				},
				surplus: '',
				imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/appointmentIcon.png',
				name: '每天都要打台球',
				gender: 0,
				orderList: [{
					id: 10,
					name: '全部',
					img: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/orderIcon0.png'
				}, {
					id: 0,
					name: '待支付',
					img: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/orderIcon1.png'
				}, {
					id: 1,
					name: '已支付',
					img: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/orderIcon2.png'
				}, {
					id: 2,
					name: '已完成',
					img: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/orderIcon3.png'
				}, {
					id: 3,
					name: '未完成',
					img: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/orderIcon4.png'
				}],
				storeId: null,
				level:null
			}
		},
		onLoad() {
			this.getCode()
			console.log(getApp().globalData.shopId)
			this.storeId = getApp().globalData.shopId
		},
		methods: {
			//充值列表
			payMore() {
				uni.navigateTo({
					url: "/pages/pay/payList?storeId=" + this.storeId + ""
				});
			},
			//客服电话弹窗
			custService() {
				uni.showActionSheet({
					title: '客服',
					itemList: ['拨打：400-626-0707'],
					success: function(res) {
						uni.makePhoneCall({
							phoneNumber: '4006260707' //仅为示例
						});
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			switchLevel(num) {
				console.log(num)
				switch (num) {
					case 1:
						return '游客'
					case 2:
						return '普通会员'
					case 3:
						return '银卡会员'
					case 4:
						return '金卡会员'
					case 5:
						return '白金卡会员'

				}
			},
			toOrderList(id) {
				uni.navigateTo({
					url: "/pages/order/orderList?orderId=" + id
				});
			},
			//商城
			toGoods() {
				uni.navigateTo({
					url: "/pages/other/goods"
				});
			},
			//企业服务页
			toEmp() {
				uni.navigateTo({
					url: "/pages/other/employers"
				});
			},
			//设置页
			toSetting() {
				uni.navigateTo({
					url: "/pages/other/setting"
				});
			},
			//获取用户code
			getCode() {
				var that = this
				uni.login({
					provider: 'weixin',
					success: res => {
						console.log(res, 'getCode')
						that.userAuth(res.code)
					}
				});
			},

			//用户code授权
			async userAuth(code) {
				const {
					data: res
				} = await authApplets(code)
				console.log(res, 'userAuth')
				if (res.data.token) {
					this.$store.commit('SET_TOKEN', res.data.token);
					const setData = {}
					setData.nickName = res.data.nickName
					setData.gender = res.data.gender
					setData.imgUrl = res.data.imgUrl
					this.$store.commit('SET_USERINFO', setData);
					this.getUserDetail()
				} else {
					this.decodePhoneParams.sessionKey = res.data.sessionKey
					this.decodePhoneParams.openId = res.data.openId
					// this.userInfoParams.openId = res.data.openId
				}
			},
			// 获取手机号
			getPhoneNumber(e) {
				this.decodePhoneParams.code = e.detail.code
				this.decodePhoneParams.encryptedData = e.detail.encryptedData
				this.decodePhoneParams.iv = e.detail.iv
				this.authPhone()
				console.log(e)
			},
			//用户手机号授权
			async authPhone() {
				const {
					data: res
				} = await authPhone(this.decodePhoneParams)
				if (res.data.token) {
					this.$store.commit('SET_TOKEN', res.data.token);
					const setData = {}
					setData.nickName = res.data.nickName
					setData.gender = res.data.gender
					setData.imgUrl = res.data.imgUrl
					this.$store.commit('SET_USERINFO', setData);
					uni.$showMsg('授权成功', 1500, 'success')
					this.getUserDetail()
				} else {}
			},
			//用户详情
			async getUserDetail() {
				const {
					data: res
				} = await getUserDetail()
				console.log(res, 22222)
				this.surplus = res.data.surplus
				this.level = res.data.level
			}
		}
	}
</script>

<style lang="less">
	.my {
		.headerBox {
			height: 270rpx;
			background: #2A2E33;
			padding: 36rpx 0 0 32rpx;
			box-sizing: border-box;

			.header {
				display: flex;
				align-items: center;
				height: 106rpx;

				.headPic {
					width: 106rpx;
					height: 106rpx;
					border-radius: 50%;
					overflow: hidden;
					display: block;
					background: #FFEBF0;
					margin-right: 19rpx;
				}

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
					margin-right: 8rpx;
					margin-left: 0;
					background: none;
					padding: 0;
					text{
						font-size: 20rpx;
						height: 32rpx;
						border-radius: 16rpx;
						padding: 0 12rpx;
						background: #E61525;
						color: #fff;
						display: inline-block;
						line-height: 30rpx;
						vertical-align: middle;
						margin: 0 6rpx;
					}
				}

				.gender {
					width: 26rpx;
					height: 26rpx;
				}

				.btn {
					width: 199rpx;
					height: 52rpx;
					margin-right: 0;
					margin-left: auto;
				}
			}
		}

		.container {
			padding: 0 32rpx;

			.balance {
				background: url(https://cloudcdn.noitom.com.cn/noitom2/billiard/my_balance_bg.png) no-repeat;
				background-size: 100% 100%;
				height: 244rpx;
				margin-top: -91rpx;
				color: #fff;
				padding: 30rpx 32rpx 0 45rpx;
				box-sizing: border-box;
				line-height: 1;

				.title {
					font-size: 32rpx;
				}

				.cont {
					margin-top: 80rpx;
					display: flex;
					justify-content: space-between;

					.num {
						font-size: 20rpx;

						text {
							font-size: 68rpx;
							font-weight: bold;
						}
					}

					.btn {
						width: 142rpx;
						height: 58rpx;
						background: linear-gradient(-43deg, #FEEDD6, #E7BD88);
						border-radius: 29rpx;
						font-size: 24rpx;
						color: #4B2D08;
						text-align: center;
						line-height: 58rpx;
					}
				}
			}

			.orderForm {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 32rpx;
				line-height: 1;
				margin-top: 32rpx;

				.title {
					font-size: 32rpx;
					color: #333333;
				}

				.orderList {
					display: flex;
					justify-content: space-between;
					margin-top: 34rpx;

					.cont {
						width: 100rpx;
						text-align: center;

						image {
							display: block;
							width: 48rpx;
							height: 48rpx;
							margin: 0 auto;
						}

						text {
							display: block;
							font-size: 24rpx;
							margin-top: 13rpx;
						}
					}
				}
			}

			.orther {
				background: #FFFFFF;
				border-radius: 16rpx;
				line-height: 1;
				margin-top: 32rpx;

				.cont {
					padding: 0 32rpx;
					height: 88rpx;
					display: flex;
					align-items: center;

					image {
						display: block;
						width: 48rpx;
						height: 48rpx;
						margin-right: 8rpx;
					}

					text {
						font-size: 24rpx;
						color: #171717;
					}

					uni-icons {
						margin-left: auto;
					}
				}
			}
		}
	}
</style>
